<template>
    <div class='chart-container'>
        <feature7 height='600px' width='800px'></feature7>

        <div class="legend">
            <div class="single-item">
                <div class="item item1">

                </div>Satisfactory Rewards Delivered

            </div>
            <div class="single-item">
                <div class="item item2">

                </div>Delayed Rewards Delivered

            </div>
            <div class="single-item">
                <div class="item item3">

                </div>Undesired Rewards Delivered

            </div>
            <div class="single-item">
                <div class="item item5">

                </div>Rewards Undelivered

            </div>

            <div class="single-item">
                <div class="item item6">

                </div>Work in Progress

            </div>
        </div>
    </div>
</template>

<script>
    import Feature7 from '@/components/Charts/feature7'

    export default {
        name: "p1",
        components: {
            Feature7
        }
    }
</script>

<style lang="scss" scoped>
    .chart-container {
        position: relative;
        padding: 20px;
        width: 1200px;
        height: 85vh;
        display: flex;
        .legend {
            margin-top: 66px;
            .single-item {
                display: flex;
                align-items: center;

                .item {
                    width: 26px;
                    height: 14px;
                    background-color: red;
                    margin: 16px;
                }


                .item1 {
                    background-color: #40b33f;
                }
                .item2 {
                    background-color: #c9c691;
                }
                .item3 {
                    background-color: #e4954d;
                }
                .item4 {
                    background-color: #d55442;
                }
                .item5 {
                    background-color: #bf3030;
                }
                .item6 {
                    background-color: #aaaaaa;
                }

            }
        }
    }
</style>